<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>MissQ校花</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/dian.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/iscroll5.js"></script>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }
            win.addEventListener('resize', change, false);
        })(window, document);

        $(function(){
            $('.pai-bg').css('height',$(document).height());
            var page=1;
            var j=0;
            var flog=true;
            var scrollBefore=0;
            function creatList(n){
                if(!flog){
                    return false;
                }
                $.ajax({
                    url: 'http://app.missquq.com/attach/list',
                    data:{
                        pn:n
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    beforeSend:function(){
                        $('.loading').css('display','block');
                        flog=false;
                        if(page>1){
                            scrollBefore=$('.pai-list').height()-$('.pai-drag').height()-20;
                        }
                    },
                    success: function(json) {
                        console.log(json)
                        $('.loading').css('display','none');
                        var oUl=$('.pai-drag');
                        if(json.list.length>0){
                            $.each(json.list,function(i){
                                var str=json.list[i].thumbnail.substring(0,7);
                                if(j<3){
                                    var oLi=$('<li></li>');
                                    oLi.html('<img src="img/number'+(i+1)+'.png" alt="" class="ranking"/>');
                                }else{
                                    var oLi=$('<li></li>');
                                    oLi.html('<span class="ranking-num">'+(j+1)+'</span>');
                                }
                                var oA=$('<a href=""></a>');
                                oA.attr('href','dianAll.html?personalId='+json.list[i].userId);
                                oLi.append(oA);
                                if(str=='http://'){
                                    oA.append(' <div class="fl r-headPhoto"><img index="'+json.list[i].id+'" src="'+json.list[i].thumbnail+'" /></div>');
                                }else{
                                    oA.append(' <div class="fl r-headPhoto"><img index="'+json.list[i].id+'" src="http://app.missquq.com'+json.list[i].thumbnail+'" /></div>');
                                }
                                oA.append('<div class="r-left">\
                            <p class="girls-name">'+json.list[i].AuthName+' <img src="img/sex-'+json.list[i].sex+'.png" alt="" class="sex"/></p>\
                            <p class="girls-sch">'+json.list[i].shoolName+'</p>\
                            <div class="rank-num">'+json.list[i].praises+'</div>\
                            </div>');
                                oLi.addClass('rank-list pai-list-con');
                                oUl.append(oLi);
                                j++;
                            });
                            page++;
                            console.log(n);
                            flog=true;
                        }else{
                            oUl.append('<p>没数据啦 啊啊啊啊</p>');
                        }

                    },
                    complete:function(){
                        var oBox=document.querySelector('.pai-list');
                        var scrollEnd=$('.pai-list').height()-$('.pai-drag').height();
                        var myScroll=new iScroll(oBox,{
                            scrollX: false,
                            freeScroll: false,
                            preventDefault: true,
                            click: true,
                            preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ },
                            onScrollEnd: function (){
                                if(this.y<=(scrollEnd)){
                                    creatList(page);
                                }
                            }
                        });
                        $('.pai-drag').css({'transform':'translate(0px, '+scrollBefore+'px)'})


                    }
                });
            }



            creatList(page);


            //搜索校花
            $('.search-girl').on('click',function(){
                $.ajax({
                    url: 'http://app.missquq.com/attach/list',
                    data:{
                        name:$('.search-girlname').val()
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    beforeSend:function(){
                        $('.loading').css('display','block');
                    },
                    success: function(json) {
                        $('.loading').css('display','none');
                        console.log(json);
                        var oUl=$('.pai-drag');
                        oUl.html('');
                        if(json.list.length==0){
                            alert('查无此人')
                        }else{
                            $.each(json.list,function(i){
                                var str=json.list[i].thumbnail.substring(0,7);
                                if(json.list[i].order<4){
                                    var oLi=$('<li></li>');
                                    oLi.html('<img src="img/number'+json.list[i].order+'.png" alt="" class="ranking"/>');
                                }else{
                                    var oLi=$('<li></li>');
                                    oLi.html('<span class="ranking-num">'+json.list[i].order+'</span>');
                                }
                                var oA=$('<a href=""></a>');
                                oA.attr('href','dianAll.html?personalId='+json.list[i].userId);
                                oLi.append(oA);
                                if(str=='http://'){
                                    oA.append(' <div class="fl r-headPhoto"><img index="'+json.list[i].id+'" src="'+json.list[i].thumbnail+'" /></div>');
                                }else{
                                    oA.append(' <div class="fl r-headPhoto"><img index="'+json.list[i].id+'" src="http://app.missquq.com'+json.list[i].thumbnail+'" /></div>');
                                }
                                oA.append('<div class="r-left">\
                            <p class="girls-name">'+json.list[i].AuthName+' <img src="img/sex-wome.png" alt="" class="sex"/></p>\
                            <p class="girls-sch">'+json.list[i].shoolName+'</p>\
                            <div class="rank-num">'+json.list[i].praises+'</div>\
                            </div>');
                                oLi.addClass('rank-list pai-list-con');
                                oUl.append(oLi);
                            });
                        }


                    }
                });
            });

        });
    </script>
</head>
<body>
<div class="container w640" id="main">
    <div class="pai-bg">
        <img src="img/bg2.jpg" alt=""/>
    </div>
    <div class="pai-title">
        <a href="diandiandian.html"><img class="pai-title-l" src="img/janeround1.png" alt=""/></a>
        <img class="pai-title-c" src="img/paihang.png" alt=""/>
        <a href="showface.html"><img class="pai-title-r" src="img/janeround2.png" alt=""/></a>
    </div>
    <!--<ul class="paiNavi">-->
        <!--<li><img src="img/dian/paimonth.png" alt=""/></li>-->
        <!--<li><img src="img/dian/paiall.png" alt=""/></li>-->
    <!--</ul>-->
    <div class="pai-search">
        <input type="text" placeholder="输入校花名称" class="search-girlname"/>
        <img src="img/pai-search.png" class="search-girl" alt=""/>
    </div>
    <div class="pai-list">
        <ul class="pai-drag">
        </ul>
        <div class="loading"><img src="img/dian/loading.gif" alt="" class="loadingImg"/></div>
    </div>
</div>
</body>
</html>